<template>
  <div id="WordCloud">
    <!-- 词云图 -->
    <!-- 确定颜色 -->
    <!-- 形状 -->
    <div ref="wordCloud" :wordData="wordData" class="wordBox"></div>
  </div>
</template>

<script>
export default {
  name: "WordCloud",
  props: {
    wordData: Array | Object,
    sizeRange: Array | Object,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.drawWordCloud();
  },
  methods: {
    drawWordCloud() {
      let that = this;
      let myChart2 = that.$echarts.init(that.$refs.wordCloud);
      var maskImage = new Image();
      let option = {
        // tooltip: {
        //   show: true,
        // },
        series: [
          {
            // name: "热点分析", //数据提示窗标题
            type: "wordCloud",
            // sizeRange: [11, 27], //字体大小范围，
            sizeRange: that.sizeRange, //字体大小范围，
            rotationRange: [0, 0], //自体旋转角度
            shape: "circle",
            // textPadding: 50,
            // rotationStep: 65,
            //字体分布的密集程度
            gridSize: 16,
            //设置为true可以使单词部分在画布之外绘制, 允许绘制大于画布大小的单词
            drawOutOfBound: false,
            left: "center",
            top: "center",
            width: "100%",
            height: "80%",
            right: null,
            bottom: null,
            autoSize: {
              enable: true,
              minSize: 12,
            },
            textStyle: {
              normal: {
                //   文字样式
                // fontFamily: "sans-serif",
                // fontWeight: "bold",
                color: function () {
                  let colorList = [
                    "#1779ff",
                    "#bb17ff",
                    "#fd7f2c",
                    "#f4cc7c",
                    "#ea4371",
                    "#73df87",
                    "#ea4371",
                  ];
                  let color =
                    colorList[Math.floor(Math.random() * colorList.length)];
                  return color;
                },
              },
              //   悬停上去的颜色设置
              emphasis: {
                shadowBlur: 5,
                shadowColor: "#333",
              },
            },
            data: that.wordData,
          },
        ],
      };
      myChart2.setOption(option);
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
#WordCloud {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .wordBox {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
}
</style>